import {Component, ComponentProps, VueComponent, Mut} from "vue3-oop";
import {NForm, NFormItemGi, NGrid, NInput, NSwitch} from "naive-ui";
import LogicFlow from '@logicflow/core';

interface IProps {
  logicFlow: LogicFlow,
}
@Component()
export default class ConfigProcessPanel extends VueComponent<IProps> {
  static defaultProps: ComponentProps<IProps> = {
    logicFlow: {},
  }

  public static tabKey = "Process"
  public static tabName = "流程配置"

  @Mut() private state = {
    id: this.props.logicFlow.props.process.id,
    name: this.props.logicFlow.props.process.name,
    isExecutable: this.props.logicFlow.props.process.isExecutable==='true',
    starterUsers: this.props.logicFlow.props.process.candidateStarterUsers,
    starterGroups: this.props.logicFlow.props.process.candidateStarterGroups,
    documentation: this.props.logicFlow.props.process.documentation,

  }

  private updateId = (value:string):void=>{this.state.id = value;this.props.logicFlow.props.process.id=value;}
  private updateName = (value:string):void=>{this.state.name = value;this.props.logicFlow.props.process.name=value;}
  private updateIsExecutable = (value:string):void=>{this.state.isExecutable = value==='true';this.props.logicFlow.props.process.isExecutable=value;}
  private updateStarterUsers = (value:string):void=>{this.state.starterUsers = value;this.props.logicFlow.props.process.candidateStarterUsers=value;}
  private updateStarterGroups = (value:string):void=>{this.state.starterGroups = value;this.props.logicFlow.props.process.candidateStarterGroups=value;}
  private updateDocumentation = (value:string):void=>{this.state.documentation = value;this.props.logicFlow.props.process.documentation=value;}

  render(){
    return(
      <NForm labelPlacement="left" labelWidth={100}>
        <NGrid cols={2} xGap={20}>
          <NFormItemGi label="流程ID"><NInput value={this.state.id} onUpdateValue={this.updateId} /></NFormItemGi>
          <NFormItemGi label="流程名称"><NInput value={this.state.name} onUpdateValue={this.updateName} /></NFormItemGi>
          <NFormItemGi label="可执行"><NSwitch value={this.state.isExecutable} onUpdateValue={this.updateIsExecutable} /></NFormItemGi>
          <NFormItemGi label="流程启动者"><NInput value={this.state.starterUsers} onUpdateValue={this.updateStarterUsers} /></NFormItemGi>
          <NFormItemGi label="流程启动者组"><NInput value={this.state.starterGroups} onUpdateValue={this.updateStarterGroups} /></NFormItemGi>
          <NFormItemGi label="描述文档"><NInput value={this.state.documentation} onUpdateValue={this.updateDocumentation} /></NFormItemGi>
        </NGrid>
      </NForm>
    )
  }
}